<template>
  <div id="app">
    <homeheader :seller='this.sellerdata'></homeheader>
    <div class="tab">
      <router-link to='/' tag="div" class="tab-item">商品</router-link>
      <router-link to='/ratings' tag="div" class="tab-item">评论</router-link>
      <router-link to='/sellers'  tag="div" class="tab-item">商家</router-link>
    </div>
    <div>
      <keep-alive>
        <router-view :seller='sellerdata'></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import homeheader from './pages/home/home'
import axios from 'axios'
import {urlParse} from './commen/js/util'

export default {
  name: 'App',
  data(){
    return{
      sellerdata:{
        id:(()=>{
          let queryParam=urlParse();//返回了url对象格式
          return queryParam.id;
        })()
      }
    }
  },
  components:{
   homeheader
  },
  methods:{
    change(res){
      const data=res.data
      //this.sellerdata=data.seller//直接赋值的data.seller中是不包含id的，
      //console.log(this.sellerdata.id)//打印出来是undefined
      this.sellerdata=Object.assign({},this.sellerdata,data.seller)//给对象扩展属性，在原本的this.sellerdata基础上（包含id属性），扩展了axios获取的数据
    }
  },
  created(){
    axios.get('/api/data.json?id='+this.sellerdata.id)
      .then(this.change)
  },
}
</script>

<style lang="stylus" scoped>
  .tab
    display:flex
    width:100%
    line-height:40px
    height:40px
    justify-content:center
    align-items:center
    background:rgba(7, 17, 27, 0.1)
    .tab-item
      padding:5px 10px
      flex:1
      text-align:center
      font-size: 14px
      color: rgb(77, 85, 93)
      &.router-link-exact-active//命中了tab-item且是router-link-active
        color: rgb(240, 20, 20)
</style>
